<template>
  <div class="video-monitor-view" style="padding: 16px;">
    <!-- 左侧监控点位树形结构 -->
    <div class="monitor-tree-panel">
      <div class="tree-header">
        <h3>监控点位</h3>
        <div class="tree-stats">
          <span class="online">在线: {{ onlineCount }}</span>
          <span class="offline">离线: {{ offlineCount }}</span>
        </div>
      </div>

      <div class="tree-container">
        <div class="tree-search">
          <input type="text" v-model="searchKeyword" placeholder="搜索监控点位..." class="search-input" />
        </div>

        <div class="tree-content">
          <template v-for="area in filteredAreas" :key="area.id">
            <div v-if="area.cameras && area.cameras.length" class="tree-area">
              <div class="area-header" @click="toggleArea(area.id)"
                :class="{ expanded: expandedAreas.includes(area.id) }">
                <svg class="expand-icon" viewBox="0 0 24 24">
                  <path d="M7,10L12,15L17,10H7Z" fill="currentColor" />
                </svg>
                <span class="area-name">{{ area.name }}</span>
                <span class="area-count">({{ area.cameras.length }})</span>
              </div>

              <div v-show="expandedAreas.includes(area.id)" class="camera-list">
                <div v-for="camera in area.cameras" :key="camera.id" class="camera-item" :class="{
                  active: selectedCameras.includes(camera.id),
                  offline: camera.status != '1'
                }" @click="selectCamera(camera)">
                  <div class="camera-status">
                    <div class="status-dot" :class="camera.status != '1' ? 'offline' : 'online'"></div>
                  </div>
                  <div class="camera-info">
                    <div class="camera-name">{{ camera.name }}</div>
                    <div class="camera-type">{{ camera.manufacturer }}</div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>

    <!-- 右侧视频播放区域 -->
    <div class="video-display-panel">
      <!-- 视频布局控制 -->
      <div class="video-controls">
        <div class="layout-controls">
          <button v-for="layout in layoutOptions" :key="layout.id" class="layout-btn"
            :class="{ active: activeLayout === layout.id }" @click="switchLayout(layout.id)">
            <svg viewBox="0 0 24 24">
              <path :d="layout.icon" fill="currentColor" />
            </svg>
            <span>{{ layout.name }}</span>
          </button>
        </div>

        <div class="video-actions">
          <button class="action-btn" @click="fullScreenAll">
            <svg viewBox="0 0 24 24">
              <path d="M7,14H5V19H10V17H7V14M12,14H14V17H17V19H12V14M17,10V7H14V5H19V10H17M10,5V7H7V10H5V5H10Z"
                fill="currentColor" />
            </svg>
            全屏
          </button>
          <button class="action-btn" @click="recordAll">
            <svg viewBox="0 0 24 24">
              <path
                d="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z"
                fill="currentColor" />
            </svg>
            {{ isRecord ? '暂停录制并下载' : '开始录制' }}
          </button>
        </div>
      </div>

      <!-- 视频播放网格 -->
      <div class="video-grid" :class="`layout-${activeLayout}`">
        <div v-for="(slot, index) in videoSlots" :key="index" class="video-slot" :class="{
          active: slot.camera,
          selected: selectedSlot === index
        }" @click="selectSlot(index)">
          <!-- 有摄像头时显示视频 -->
          <div v-if="slot.camera" class="video-container">
            <!-- 视频播放器 -->
            <div :id="`video-${index + 1}`" class="video-player"></div>

            <!-- 视频信息覆盖层 -->
            <div class="video-overlay">
              <div class="video-title">{{ slot.camera.name }}</div>
              <div class="video-status">
                <span class="resolution">{{ slot.camera.resolution }}</span>
                <span class="fps">{{ slot.camera.fps }}fps</span>
              </div>
            </div>

            <!-- 视频加载状态 -->
            <!-- <div v-if="slot.loading" class="video-loading">
              <div class="loading-spinner"></div>
              <span>加载中...</span>
            </div> -->
          </div>



          <!-- 空槽位 -->
          <div v-else class="empty-slot">
            <svg viewBox="0 0 24 24">
              <path
                d="M4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H16V20A1,1 0 0,1 15,21H9A1,1 0 0,1 8,20V18H4A2,2 0 0,1 2,16V4A2,2 0 0,1 4,2M4,4V16H20V4H4Z"
                fill="currentColor" />
            </svg>
            <span>点击摄像头添加视频</span>
          </div>
        </div>
      </div>

      <!-- 视频控制面板 -->
      <div class="video-control-panel" v-if="false" :class="{
        active: selectedSlot !== null && videoSlots[selectedSlot] && videoSlots[selectedSlot].camera,
        dragging: isDragging
      }">
        <!-- 拖拽手柄 -->
        <div class="drag-handle" @mousedown="startDrag">
          <div class="drag-dots">
            <span></span>
            <span></span>
            <span></span>
          </div>
          <span class="drag-text">云台控制面板</span>
        </div>

        <div v-if="selectedSlot !== null && videoSlots[selectedSlot] && videoSlots[selectedSlot].camera"
          class="control-sections">
          <div class="control-section">
            <h4>{{ videoSlots[selectedSlot].camera.name }} - 云台控制</h4>
            <div class="ptz-controls">
              <div class="ptz-direction">
                <button class="ptz-btn" @click="ptzControl('up')">
                  <svg viewBox="0 0 24 24">
                    <path d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" fill="currentColor" />
                  </svg>
                </button>
                <div class="ptz-middle">
                  <button class="ptz-btn" @click="ptzControl('left')">
                    <svg viewBox="0 0 24 24">
                      <path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" fill="currentColor" />
                    </svg>
                  </button>
                  <button class="ptz-btn center" @click="ptzControl('home')">
                    <svg viewBox="0 0 24 24">
                      <path
                        d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,10.5A1.5,1.5 0 0,1 13.5,12A1.5,1.5 0 0,1 12,13.5A1.5,1.5 0 0,1 10.5,12A1.5,1.5 0 0,1 12,10.5Z"
                        fill="currentColor" />
                    </svg>
                  </button>
                  <button class="ptz-btn" @click="ptzControl('right')">
                    <svg viewBox="0 0 24 24">
                      <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" fill="currentColor" />
                    </svg>
                  </button>
                </div>
                <button class="ptz-btn" @click="ptzControl('down')">
                  <svg viewBox="0 0 24 24">
                    <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" fill="currentColor" />
                  </svg>
                </button>
              </div>
              <div class="ptz-zoom">
                <button class="ptz-btn zoom-in" @click="ptzControl('zoom-in')">
                  <svg viewBox="0 0 24 24">
                    <path
                      d="M15.5,14H20.5L22,15.5V20.5L20.5,22H15.5L14,20.5V15.5L15.5,14M16,16V20H20V16H16M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5A4.5,4.5 0 0,0 5,9.5A4.5,4.5 0 0,0 9.5,14A4.5,4.5 0 0,0 14,9.5A4.5,4.5 0 0,0 9.5,5M7,9H12V10H7V9Z"
                      fill="currentColor" />
                  </svg>
                </button>
                <button class="ptz-btn zoom-out" @click="ptzControl('zoom-out')">
                  <svg viewBox="0 0 24 24">
                    <path
                      d="M15.5,14H20.5L22,15.5V20.5L20.5,22H15.5L14,20.5V15.5L15.5,14M16,16V20H20V16H16M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5A4.5,4.5 0 0,0 5,9.5A4.5,4.5 0 0,0 9.5,14A4.5,4.5 0 0,0 14,9.5A4.5,4.5 0 0,0 9.5,5M7,9H12V10H7V9Z"
                      fill="currentColor" />
                  </svg>
                </button>
              </div>
            </div>
          </div>

          <div class="control-section">
            <h4>广播喊话</h4>
            <div class="broadcast-controls">
              <textarea v-model="broadcastMessage" placeholder="输入广播内容..." class="broadcast-input"></textarea>
              <div class="broadcast-actions">
                <button class="broadcast-btn" @click="startBroadcast">
                  <svg viewBox="0 0 24 24">
                    <path
                      d="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z"
                      fill="currentColor" />
                  </svg>
                  开始广播
                </button>
                <button class="broadcast-btn secondary" @click="stopBroadcast">
                  <svg viewBox="0 0 24 24">
                    <path
                      d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,12 0 0,1 2,12A10,12 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8A4,4 0 0,1 16,12Z"
                      fill="currentColor" />
                  </svg>
                  停止广播
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { Notification, Message } from '@arco-design/web-vue';

// 响应式数据
const searchKeyword = ref('')
const expandedAreas = ref(['scenic', 'entrance', 'public'])
const selectedCameras = ref([]) // 选中的摄像头
const selectedSlot = ref(null) // 选中的视频槽位
const activeLayout = ref('single') // 当前布局  single: 1, quad: 4, nine: 9
const broadcastMessage = ref('') // 广播消息

import api from '@/api'

import useDataStore from '@/stores/data.js';
import { storeToRefs } from 'pinia';
const store = useDataStore();
const { videoList, videoTypeList } = storeToRefs(store)

const isRecord = ref(false)

// 拖拽相关数据
const isDragging = ref(false)
const dragOffset = ref({ x: 0, y: 0 })

// 布局选项
const layoutOptions = ref([
  {
    id: 'single',
    name: '单屏',
    icon: 'M4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H4A2,2 0 0,1 2,16V4A2,2 0 0,1 4,2M4,4V16H20V4H4Z'
  },
  {
    id: 'quad',
    name: '四宫格',
    icon: 'M4,2H11V9H4V2M13,2H20V9H13V2M4,11H11V18H4V11M13,11H20V18H13V11Z'
  },
  {
    id: 'nine',
    name: '九宫格',
    icon: 'M3,3H8V8H3V3M10,3H15V8H10V3M17,3H22V8H17V3M3,10H8V15H3V10M10,10H15V15H10V10M17,10H22V15H17V10M3,17H8V22H3V17M10,17H15V22H10V17M17,17H22V22H17V17Z'
  }
])

// 监控区域数据
const monitorAreas = ref([])

// 计算属性
const filteredAreas = computed(() => {
  if (!searchKeyword.value) return monitorAreas.value

  return monitorAreas.value.map(area => ({
    ...area,
    cameras: area.cameras.filter(camera =>
      camera.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
    )
  })).filter(area => area.cameras.length > 0)
})

const onlineCount = computed(() => {
  return monitorAreas.value.reduce((count, area) => {
    return count + area.cameras.filter(cam => cam.status === 'online').length
  }, 0)
})

const offlineCount = computed(() => {
  return monitorAreas.value.reduce((count, area) => {
    return count + area.cameras.filter(cam => cam.status === 'offline').length
  }, 0)
})

// 视频槽位
const videoSlots = ref([
  { camera: null, loading: false }
])

const getList = async () => {
  let listType = await api.exampleApi.getVideoTypeList({ page: 1, pageSize: 1000 })
  let list = await api.exampleApi.getVideoList({ page: 1, pageSize: 1000 })

  videoTypeList.value = listType.list || []
  videoList.value = list.list || []

  let playList = videoTypeList.value.map(t => {
    return {
      id: t.id,
      name: t.name,
      cameras: videoList.value.filter(v => v.type == t.id)
    }
  })
  console.log("摄像头列表", playList);
  monitorAreas.value = playList
}

// 方法
const toggleArea = (areaId) => {
  const index = expandedAreas.value.indexOf(areaId)
  if (index > -1) {
    expandedAreas.value.splice(index, 1)
  } else {
    expandedAreas.value.push(areaId)
  }
}

const selectCamera = (camera) => {
  if (selectedSlot.value !== null) {
    videoSlots.value[selectedSlot.value] = {
      camera: camera,
      loading: true
    }
    setTimeout(() => {
      playVideo(`video-${selectedSlot.value + 1}`, camera.play_url)
    }, 1000)

  }
}

// 切换布局
const switchLayout = (layoutId) => {
  // for (let key in jessibuca) {
  //   if (jessibuca[key].isRecording()) {
  //     Notification.info({
  //       title: '操作提示',
  //       content: '请先停止录制',
  //     })
  //     return
  //   }
  // }

  for (let key in jessibuca) {
    jessibuca[key].destroy()
  }
  jessibuca = {}
  isRecord.value = false
  activeLayout.value = layoutId

  // 根据布局调整视频槽位数量
  const slotCounts = { single: 1, quad: 4, nine: 9 }
  const newSlotCount = slotCounts[layoutId]

  videoSlots.value = Array(newSlotCount).fill(null).map(() => ({
    camera: null,
    loading: false
  }))

  selectedSlot.value = 0
}

const selectSlot = (index) => {
  selectedSlot.value = index
  if (jessibuca[`video-${selectedSlot.value + 1}`] && jessibuca[`video-${selectedSlot.value + 1}`].isRecording()) {
    isRecord.value = true
  } else {
    isRecord.value = false
  }
}

// 拖拽处理方法
const startDrag = (event) => {
  isDragging.value = true
  const panel = event.target.closest('.video-control-panel')
  const rect = panel.getBoundingClientRect()

  dragOffset.value = {
    x: event.clientX - rect.left,
    y: event.clientY - rect.top
  }

  document.addEventListener('mousemove', onDrag)
  document.addEventListener('mouseup', stopDrag)
  event.preventDefault()
}

const onDrag = (event) => {
  if (!isDragging.value) return

  const panel = document.querySelector('.video-control-panel')
  if (!panel) return

  // 获取视频显示面板容器
  const displayPanel = document.querySelector('.video-display-panel')
  if (!displayPanel) return

  const displayRect = displayPanel.getBoundingClientRect()

  // 计算相对于视频显示面板的坐标
  let newX = event.clientX - dragOffset.value.x - displayRect.left
  let newY = event.clientY - dragOffset.value.y - displayRect.top

  // 获取面板尺寸
  const panelRect = panel.getBoundingClientRect()
  const panelWidth = panelRect.width
  const panelHeight = panelRect.height

  // 限制拖拽范围在视频显示面板内（允许部分超出）
  const maxX = displayRect.width - panelWidth + 100
  const maxY = displayRect.height - panelHeight + 100
  const minX = -100
  const minY = -100

  newX = Math.max(minX, Math.min(newX, maxX))
  newY = Math.max(minY, Math.min(newY, maxY))

  // 直接设置CSS样式
  panel.style.right = 'auto'
  panel.style.bottom = 'auto'
  panel.style.left = `${newX}px`
  panel.style.top = `${newY}px`
}

const stopDrag = () => {
  isDragging.value = false
  document.removeEventListener('mousemove', onDrag)
  document.removeEventListener('mouseup', stopDrag)
}

// 重置控制面板位置到默认位置
const resetPanelPosition = () => {
  const panels = document.querySelectorAll('.video-control-panel')
  panels.forEach(panel => {
    // 重置为CSS默认位置
    panel.style.left = 'auto'
    panel.style.top = 'auto'
    panel.style.right = '-20px'
    panel.style.bottom = '-20px'
  })
}

let jessibuca = {}
const playVideo = (id, url) => {
  if (jessibuca[id]) {
    jessibuca[id].destroy()
  }

  let container = document.getElementById(id)

  jessibuca[id] = new window.Jessibuca(
    Object.assign(
      {
        container: container, //放置视频播放器的容器
        videoBuffer: 0.2, // 缓冲时长s
        isResize: false,  //是否允许调整播放器大小
        useWCS: false, //是否使用WebSocket传输流媒体
        useMSE: true, //是否使用MSE（Media Source Extensions）流媒体协议
        text: "", //播放器上的文本
        // background: "bg.jpg", //背景图片
        loadingText: "加载中...",
        // hasAudio:false,
        debug: true,
        supportDblclickFullscreen: true, //是否支持双击全屏
        showBandwidth: true, // 显示网速
        operateBtns: { // 操作按钮
          fullscreen: true, // 全屏
          screenshot: true, // 截图
          play: false, // 播放
          audio: true, // 音频
          record: true, // 录制
        },
        vod: true, // 是否是流媒体视频
        forceNoOffscreen: true,
        isNotMute: true,
        timeout: 10
      },

    )
  );

  setTimeout(() => {
    jessibuca[id].play(url)
  }, 500)
}
// 当前播放视频全屏
const fullScreenAll = () => {
  if (jessibuca[`video-${selectedSlot.value + 1}`]) {
    jessibuca[`video-${selectedSlot.value + 1}`].setFullscreen(true)
  } else {
    Notification.info({
      title: '操作提示',
      content: '请先选择播放摄像头',
    })
  }
}
const recordAll = () => {
  if (jessibuca[`video-${selectedSlot.value + 1}`]) {
    if (jessibuca[`video-${selectedSlot.value + 1}`].isRecording()) {
      jessibuca[`video-${selectedSlot.value + 1}`].stopRecordAndSave()
      isRecord.value = false
    } else {
      jessibuca[`video-${selectedSlot.value + 1}`].startRecord(new Date().getTime(), 'mp4')
      isRecord.value = true
    }
  } else {
    Notification.info({
      title: '操作提示',
      content: '请先选择播放摄像头',
    })
  }

}

// 生命周期
onMounted(() => {
  selectedSlot.value = 0
  getList()
  // 监听窗口大小变化
  window.addEventListener('resize', onWindowResize)
})

onUnmounted(() => {
  // 清理函数
  window.removeEventListener('resize', onWindowResize)
  document.removeEventListener('mousemove', onDrag)
  document.removeEventListener('mouseup', stopDrag)

  for (let key in jessibuca) {
    jessibuca[key].destroy()
  }
})

// 窗口大小变化处理
const onWindowResize = () => {
  // 窗口大小变化时，重置面板位置到默认位置
  resetPanelPosition()
}
</script>

<style scoped>
/* CSS变量定义 */
:root {
  --primary-green: #00ff88;
  --secondary-green: #00d4aa;
  --accent-green: #4caf50;
  --dark-green: #1b5e20;
  --light-green: #e8f5e8;
  --water-blue: #00bcd4;
  --nature-gold: #ffab40;
  --bg-primary: rgba(13, 27, 42, 0.95);
  --bg-secondary: rgba(0, 50, 30, 0.85);
  --glass-bg: rgba(0, 255, 136, 0.08);
  --border-color: rgba(0, 255, 136, 0.3);
}

.video-monitor-view {
  /* 继承主页面的布局系统 */
  height: 100%;
  display: flex;
  gap: 1.5rem;
  overflow: hidden;
  /* 不需要背景，使用主页面的背景 */
  color: #ffffff;
  position: 40px;
  font-family: 'Microsoft YaHei', sans-serif;
}

.video-monitor-view::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center,
      rgba(0, 255, 136, 0.1) 0%,
      rgba(0, 50, 30, 0.3) 50%,
      rgba(13, 27, 42, 0.4) 100%);
  z-index: 0;
  pointer-events: none;
}

/* 左侧监控点位树形结构 */
.monitor-tree-panel {
  /* 左侧固定宽度面板 - 与主页面左侧面板保持一致 */
  flex: 0 0 auto;
  width: 320px;
  min-width: 280px;
  max-width: 400px;
  background: var(--glass-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.tree-header {
  padding: 20px;
  background: rgba(0, 255, 136, 0.12);
  border-bottom: 1px solid var(--border-color);
}

.tree-header h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--primary-green);
  text-shadow: 0 0 15px var(--primary-green);
}

.tree-stats {
  display: flex;
  gap: 20px;
  font-size: 14px;
}

.tree-stats .online {
  color: var(--primary-green);
}

.tree-stats .offline {
  color: #ff4757;
}

.tree-container {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tree-search {
  padding: 16px;
  background: rgba(0, 255, 136, 0.05);
  border-bottom: 1px solid var(--border-color);
}

.search-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--glass-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.search-input:focus {
  border-color: var(--primary-green);
  box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.2);
}

.tree-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px;
}

.tree-content::-webkit-scrollbar {
  width: 6px;
}

.tree-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

.tree-content::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.tree-area {
  margin-bottom: 4px;
}

.area-header {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
  background: var(--glass-bg);
  margin-bottom: 2px;
  border-radius: 8px;
  backdrop-filter: blur(8px);
}

.area-header:hover {
  background: rgba(0, 255, 136, 0.12);
  border-left-color: var(--primary-green);
  transform: translateX(2px);
}

.area-header.expanded {
  background: rgba(0, 255, 136, 0.15);
  border-left-color: var(--primary-green);
}

.area-header.expanded .expand-icon {
  transform: rotate(0deg);
  color: var(--primary-green);
}

.expand-icon {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  transition: all 0.3s ease;
  transform: rotate(-90deg);
  color: rgba(255, 255, 255, 0.7);
}

.area-name {
  flex: 1;
  font-weight: 500;
  color: #ffffff;
  font-size: 14px;
}

.area-header:hover .area-name {
  color: #ffffff;
}

.area-count {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  background: rgba(0, 255, 136, 0.1);
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid rgba(0, 255, 136, 0.2);
}

.area-header:hover .area-count {
  background: rgba(0, 255, 136, 0.15);
  border-color: rgba(0, 255, 136, 0.3);
  color: #ffffff;
}

.camera-list {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  margin: 6px 0;
  padding: 6px;
}

.camera-item {
  display: flex;
  align-items: center;
  padding: 12px 16px 12px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
  background: var(--glass-bg);
  margin-bottom: 2px;
  border-radius: 6px;
  backdrop-filter: blur(8px);
}

.camera-item:hover {
  background: rgba(0, 255, 136, 0.1);
  transform: translateX(2px);
}

.camera-item.active {
  background: rgba(0, 255, 136, 0.18);
  border-left-color: var(--primary-green);
  transform: translateX(2px);
}

.camera-item.offline {
  opacity: 0.6;
}

.camera-item.offline:hover {
  opacity: 0.8;
}

.camera-status {
  margin-right: 12px;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00ff88;
  color: #00ff88;
  box-shadow: 0 0 6px currentColor;
  transition: all 0.3s ease;
  position: relative;
}

.status-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  background: #ffffff;
  border-radius: 50%;
  opacity: 0.9;
}

.status-dot.offline {
  background: #ff4757;
  color: #ff4757;
  animation: none;
}

.status-dot:not(.offline) {
  background: #00ff88;
  color: #00ff88;
  animation: pulse-gentle 2s infinite;
}

@keyframes pulse-gentle {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 6px currentColor;
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 0 10px currentColor;
  }
}

.camera-info {
  flex: 1;
}

.camera-name {
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 3px;
  font-weight: 500;
}

.camera-item.active .camera-name {
  font-weight: 600;
}

.camera-type {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 255, 136, 0.08);
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid rgba(0, 255, 136, 0.15);
  display: inline-block;
}

.camera-item.active .camera-type {
  background: rgba(0, 255, 136, 0.15);
  border-color: rgba(0, 255, 136, 0.25);
  color: #ffffff;
}

/* 右侧视频播放区域 */
.video-display-panel {
  /* 右侧撑满剩余空间 - 与主页面中心区域保持一致 */
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: rgba(0, 255, 136, 0.02);
  border: 1px solid rgba(0, 255, 136, 0.15);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(5px);
}

.video-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: rgba(0, 255, 136, 0.08);
  border-bottom: 1px solid rgba(0, 255, 136, 0.2);
  backdrop-filter: blur(10px);
  flex-shrink: 0;
  min-height: 60px;
}

.layout-controls {
  display: flex;
  gap: 12px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  backdrop-filter: blur(15px);
}

.layout-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--glass-bg);
  border: 2px solid transparent;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
  min-width: 80px;
}

.layout-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.3), transparent);
  transition: left 0.6s ease;
}

.layout-btn:hover::before {
  left: 100%;
}

.layout-btn:hover {
  background: rgba(0, 255, 136, 0.15);
  border-color: rgba(0, 255, 136, 0.5);
  color: #ffffff;
  transform: translateY(-3px) scale(1.05);
  box-shadow:
    0 8px 25px rgba(0, 255, 136, 0.3),
    0 0 20px rgba(0, 255, 136, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.layout-btn.active {
  background: linear-gradient(135deg, rgba(0, 50, 30, 0.9) 0%, rgba(13, 27, 42, 0.9) 100%);
  border-color: var(--primary-green);
  color: #ffffff;
  font-weight: 600;
  transform: translateY(-2px);
  box-shadow:
    0 12px 35px rgba(0, 255, 136, 0.4),
    0 0 30px rgba(0, 255, 136, 0.3),
    inset 0 1px 0 rgba(0, 255, 136, 0.3),
    inset 0 -1px 0 rgba(0, 255, 136, 0.1);
  border-width: 3px;
}

.layout-btn.active::before {
  display: none;
}

.layout-btn.active svg {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.5));
  color: var(--primary-green);
}

.layout-btn.active span {
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
  font-weight: 700;
  color: #ffffff;
}

.layout-btn svg {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease;
  filter: drop-shadow(0 0 3px currentColor);
}

.layout-btn span {
  font-size: 12px;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.video-actions {
  display: flex;
  gap: 12px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, rgba(0, 212, 170, 0.1) 100%);
  border: 2px solid rgba(0, 255, 136, 0.3);
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.4), transparent);
  transition: left 0.6s ease;
}

.action-btn:hover::before {
  left: 100%;
}

.action-btn:hover {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.2) 0%, rgba(0, 212, 170, 0.2) 100%);
  border-color: var(--primary-green);
  color: #ffffff;
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 8px 25px rgba(0, 255, 136, 0.3),
    0 0 20px rgba(0, 255, 136, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
}

.action-btn:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow:
    0 4px 15px rgba(0, 255, 136, 0.4),
    inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.action-btn svg {
  width: 18px;
  height: 18px;
  transition: all 0.3s ease;
  filter: drop-shadow(0 0 3px currentColor);
}

.action-btn:hover svg {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.6));
}

.video-slot {
  background: var(--glass-bg);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  overflow: visible;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  backdrop-filter: blur(10px);
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
}

.video-slot:hover {
  border-color: var(--primary-green);
}



.video-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000000;
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
  padding: 12px;
  color: #ffffff;
}

.video-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.video-status {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #7a8699;
}

.video-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #7a8699;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color);
  border-top: 3px solid var(--primary-green);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.empty-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #7a8699;
  text-align: center;
  background: rgba(0, 0, 0, 0.2);
}

.empty-slot svg {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

/* 选中的视频槽应该有更高的z-index */
.video-slot.selected {
  border-color: var(--primary-green);
  box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.3);
  z-index: 10;
}

/* 视频控制面板 - 定位到选中视频槽的右下角 */
.video-slot.selected .video-control-panel {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 320px;
  max-width: 400px;
  transform: translateY(10px) scale(0.95);
  background: linear-gradient(135deg,
      rgba(13, 27, 42, 0.95) 0%,
      rgba(0, 30, 20, 0.92) 50%,
      rgba(13, 27, 42, 0.95) 100%);
  border: 2px solid rgba(0, 255, 136, 0.4);
  border-radius: 16px;
  backdrop-filter: blur(15px);
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(0, 255, 136, 0.15),
    inset 0 1px 0 rgba(0, 255, 136, 0.1);
  z-index: 20;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  user-select: none;
}

/* 通用的视频控制面板基础样式 */
.video-control-panel {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 320px;
  max-width: 400px;
  transform: translateY(10px) scale(0.95);
  background: linear-gradient(135deg,
      rgba(13, 27, 42, 0.95) 0%,
      rgba(0, 30, 20, 0.92) 50%,
      rgba(13, 27, 42, 0.95) 100%);
  border: 2px solid rgba(0, 255, 136, 0.4);
  border-radius: 16px;
  backdrop-filter: blur(15px);
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(0, 255, 136, 0.15),
    inset 0 1px 0 rgba(0, 255, 136, 0.1);
  z-index: 15;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  user-select: none;
}

.video-control-panel.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.video-control-panel.dragging {
  transition: none !important;
  transform: scale(1.02) !important;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(0, 255, 136, 0.2),
    inset 0 1px 0 rgba(0, 255, 136, 0.1);
}

.video-control-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center,
      rgba(0, 255, 136, 0.08) 0%,
      transparent 70%);
  border-radius: 16px;
  pointer-events: none;
}

/* 拖拽手柄 */
.drag-handle {
  position: relative;
  z-index: 2;
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.12) 0%, rgba(0, 212, 170, 0.08) 100%);
  border-bottom: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 16px 16px 0 0;
  cursor: move;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.drag-handle:hover {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.18) 0%, rgba(0, 212, 170, 0.12) 100%);
  border-bottom-color: rgba(0, 255, 136, 0.3);
}

.drag-handle:active {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.25) 0%, rgba(0, 212, 170, 0.15) 100%);
}

.drag-dots {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drag-dots span {
  width: 4px;
  height: 4px;
  background: var(--primary-green);
  border-radius: 50%;
  opacity: 0.7;
  transition: all 0.3s ease;
}

.drag-handle:hover .drag-dots span {
  opacity: 1;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
}

.drag-text {
  color: var(--primary-green);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
  user-select: none;
}

.drag-handle:hover .drag-text {
  text-shadow: 0 0 12px rgba(0, 255, 136, 0.5);
}

.control-sections {
  position: relative;
  z-index: 1;
}

.control-section {
  position: relative;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 255, 136, 0.15);
}

.control-section:last-child {
  border-bottom: none;
}

.control-section h4 {
  margin: 0 0 16px 0;
  color: var(--primary-green);
  font-size: 15px;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(0, 255, 136, 0.4);
  letter-spacing: 0.5px;
}

/* 云台控制 */
.ptz-controls {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
}

.ptz-direction {
  display: grid;
  grid-template-columns: 40px 40px 40px;
  grid-template-rows: 40px 40px 40px;
  gap: 4px;
  background: linear-gradient(135deg, rgba(0, 30, 20, 0.8) 0%, rgba(13, 27, 42, 0.6) 100%);
  padding: 10px;
  border-radius: 16px;
  border: 2px solid rgba(0, 255, 136, 0.25);
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(0, 255, 136, 0.08);
}

.ptz-direction .ptz-btn:nth-child(1) {
  grid-column: 2;
  grid-row: 1;
}

.ptz-middle {
  grid-column: 1 / 4;
  grid-row: 2;
  display: contents;
}

.ptz-middle .ptz-btn:nth-child(1) {
  grid-column: 1;
  grid-row: 2;
}

.ptz-middle .ptz-btn:nth-child(2) {
  grid-column: 2;
  grid-row: 2;
}

.ptz-middle .ptz-btn:nth-child(3) {
  grid-column: 3;
  grid-row: 2;
}

.ptz-direction>.ptz-btn:last-child {
  grid-column: 2;
  grid-row: 3;
}

.ptz-btn {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.08) 0%, rgba(0, 212, 170, 0.05) 100%);
  border: 2px solid rgba(0, 255, 136, 0.3);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 16px;
  font-weight: 600;
  height: 40px;
  width: 40px;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.ptz-btn svg {
  width: 18px;
  height: 18px;
  transition: all 0.3s ease;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}

.ptz-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.25), transparent);
  transition: left 0.5s ease;
}

.ptz-btn:hover::before {
  left: 100%;
}

.ptz-btn:hover {
  background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
  color: #ffffff;
  border-color: var(--primary-green);
  transform: scale(1.05);
  box-shadow:
    0 6px 20px rgba(0, 255, 136, 0.4),
    0 0 25px rgba(0, 255, 136, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.ptz-btn:hover svg {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

.ptz-btn:active {
  transform: scale(0.95);
  box-shadow:
    0 3px 12px rgba(0, 255, 136, 0.5),
    inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ptz-btn.center {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.15) 0%, rgba(0, 212, 170, 0.12) 100%);
  border: 3px solid rgba(0, 255, 136, 0.5);
  color: var(--primary-green);
  font-weight: 700;
  position: relative;
}

.ptz-btn.center::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, transparent 100%);
  border-radius: 6px;
  pointer-events: none;
}

.ptz-btn.center:hover {
  background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
  color: #ffffff;
  box-shadow:
    0 8px 30px rgba(0, 255, 136, 0.5),
    0 0 35px rgba(0, 255, 136, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.ptz-btn.center svg {
  width: 20px;
  height: 20px;
}

.ptz-zoom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(135deg, rgba(0, 30, 20, 0.8) 0%, rgba(13, 27, 42, 0.6) 100%);
  padding: 10px;
  border-radius: 16px;
  border: 2px solid rgba(0, 255, 136, 0.25);
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(0, 255, 136, 0.08);
}

.ptz-zoom .ptz-btn {
  width: 50px;
  height: 50px;
  border-radius: 12px;
}

.ptz-zoom .ptz-btn svg {
  width: 20px;
  height: 20px;
}

.ptz-zoom .ptz-btn.zoom-in {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.12) 0%, rgba(0, 212, 170, 0.08) 100%);
  border-color: rgba(0, 255, 136, 0.4);
  color: var(--primary-green);
}

.ptz-zoom .ptz-btn.zoom-in:hover {
  background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
  color: #ffffff;
  border-color: var(--primary-green);
  box-shadow:
    0 8px 25px rgba(0, 255, 136, 0.4),
    0 0 30px rgba(0, 255, 136, 0.3);
}

.ptz-zoom .ptz-btn.zoom-out {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.12) 0%, rgba(0, 212, 170, 0.08) 100%);
  border-color: rgba(0, 255, 136, 0.4);
  color: var(--primary-green);
}

.ptz-zoom .ptz-btn.zoom-out:hover {
  background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
  color: #ffffff;
  border-color: var(--primary-green);
  box-shadow:
    0 8px 25px rgba(0, 255, 136, 0.4),
    0 0 30px rgba(0, 255, 136, 0.3);
}

/* 广播控制 */
.broadcast-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.broadcast-input {
  padding: 16px;
  background: linear-gradient(135deg, var(--glass-bg) 0%, rgba(0, 255, 136, 0.03) 100%);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  color: #ffffff;
  resize: vertical;
  min-height: 80px;
  font-size: 14px;
  font-family: 'Microsoft YaHei', sans-serif;
  outline: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  line-height: 1.5;
  position: relative;
}

.broadcast-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.broadcast-input:focus {
  border-color: var(--primary-green);
  box-shadow:
    0 0 0 3px rgba(0, 255, 136, 0.2),
    0 4px 20px rgba(0, 255, 136, 0.1);
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.08) 0%, rgba(0, 212, 170, 0.05) 100%);
}

.broadcast-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.broadcast-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.broadcast-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

.broadcast-btn:hover::before {
  left: 100%;
}

.broadcast-btn:not(.secondary) {
  background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
  color: #ffffff;
  border: 2px solid var(--primary-green);
  box-shadow: 0 4px 15px rgba(0, 255, 136, 0.3);
}

.broadcast-btn:not(.secondary):hover {
  background: linear-gradient(135deg, var(--secondary-green) 0%, #00b896 100%);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow:
    0 8px 25px rgba(0, 255, 136, 0.4),
    0 0 20px rgba(0, 255, 136, 0.3);
}

.broadcast-btn:not(.secondary):active {
  transform: translateY(0);
  box-shadow:
    0 4px 15px rgba(0, 255, 136, 0.4),
    inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.broadcast-btn.secondary {
  background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
  color: #ffffff;
  border: 2px solid #ff4757;
  box-shadow: 0 4px 15px rgba(255, 71, 87, 0.3);
}

.broadcast-btn.secondary:hover {
  background: linear-gradient(135deg, #ff3742 0%, #ff2838 100%);
  transform: translateY(-2px);
  box-shadow:
    0 8px 25px rgba(255, 71, 87, 0.4),
    0 0 20px rgba(255, 71, 87, 0.3);
}

.broadcast-btn.secondary:active {
  transform: translateY(0);
  box-shadow:
    0 4px 15px rgba(255, 71, 87, 0.4),
    inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.broadcast-btn svg {
  width: 16px;
  height: 16px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.broadcast-btn:not(.secondary) svg {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.broadcast-btn.secondary svg {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* 在较小屏幕上调整左侧面板宽度 */
@media (max-width: 1200px) {
  .monitor-tree-panel {
    width: 280px;
    min-width: 260px;
  }
}

/* 视频播放网格 */
.video-grid {
  flex: 1;
  padding: 16px;
  display: grid;
  gap: 12px;
  overflow: hidden;
  min-height: 0;
}

.video-grid.layout-single {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.video-grid.layout-quad {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.video-grid.layout-nine {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.camera-list {
  background: rgba(0, 0, 0, 0.2);
}

.camera-item {
  display: flex;
  align-items: center;
  padding: 10px 20px 10px 44px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
  background: var(--glass-bg);
  margin-bottom: 2px;
  border-radius: 4px;
  backdrop-filter: blur(5px);
}

.camera-item:hover {
  background: rgba(0, 255, 136, 0.12);
}

.camera-item.active {
  background: rgba(0, 255, 136, 0.2);
  border-left-color: var(--primary-green);
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

.area-header {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
  background: var(--glass-bg);
  margin-bottom: 2px;
  border-radius: 6px;
  backdrop-filter: blur(5px);
}

.area-header:hover {
  background: rgba(0, 255, 136, 0.15);
  border-left-color: var(--primary-green);
  transform: translateX(3px);
}

.tree-search {
  padding: 16px;
  background: rgba(0, 255, 136, 0.05);
  border-bottom: 1px solid var(--border-color);
}

.search-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--glass-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.search-input:focus {
  border-color: var(--primary-green);
  box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.2);
}

.tree-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px;
}

.tree-content::-webkit-scrollbar {
  width: 6px;
}

.tree-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

.tree-content::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.empty-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #7a8699;
  text-align: center;
  background: rgba(0, 0, 0, 0.2);
}

.empty-slot svg {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}
</style>